<script setup lang="ts">
import { Card, Col, Row } from 'ant-design-vue';

import Icon from '#/components/Icons';

interface Props {
  items: any;
}
defineOptions({
  name: 'WorkbenchQuickNav',
});
withDefaults(defineProps<Props>(), {
  items: () => [],
  title: '系统信息',
});

defineEmits(['click']);
</script>

<template>
  <Row :gutter="3">
    <Col v-for="(item, index) in items" :key="index" :md="3" :sm="8" :xs="8">
      <Card
        class="icon-panel icon-panel-body"
        hoverable
        @click="$emit('click', item)"
      >
        <Icon :icon="item.icon" :style="{ color: item.color }" />
        <p>{{ item.title }}</p>
      </Card>
    </Col>
  </Row>
</template>

<style lang="scss">
.icon-panel {
  margin-bottom: 6px;
  text-align: center;
  cursor: pointer;

  .icon-panel-body {
    padding: 12px;
    font-size: 12px;

    &:hover {
      svg {
        transform: scale(1.15);
      }
    }

    svg {
      display: block;
      width: 20px;
      height: 20px;
      margin: auto;
      font-size: 20px;
      transition: all ease-in-out 0.3s;
    }

    p {
      margin-top: 10px;
      text-align: center;
    }
  }
}
</style>
